<template>
  <el-row :gutter="20">
    <el-col
      :sm="24"
      :md="24"
      :lg="16"
      :xl="16"
    >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-row>
              <el-col :span="24">
                <span><el-avatar
                  size="small"
                  icon="el-icon-data-line"
                  class="order-histogram-icon"
                />用户</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div>
          <el-row>
            <el-col :span="24">
              <div
                ref="chartRefUser"
                class="echart-area"
              />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col
      :sm="24"
      :md="24"
      :lg="8"
      :xl="8"
    >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-row>
              <el-col :span="24">
                <span><el-avatar
                  size="small"
                  icon="el-icon-pie-chart"
                  class="order-histogram-icon"
                />购买用户统计</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div>
          <el-row>
            <el-col :span="24">
              <div
                ref="chartRefPurchase"
                class="echart-area"
              />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import type { IUserChartData } from '@/api/types/home'
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getUserChartData } from '@/api/home'
import useInnerWidth from './useInnerWidth'

const innerWidth = useInnerWidth()
const chartRefUser = ref<HTMLDivElement | null>(null)
const chartRefPurchase = ref<HTMLDivElement | null>(null)

const data = ref<IUserChartData|null>(null)

const loadData = async () => {
  data.value = await getUserChartData()
}
let chartUser: echarts.ECharts | null = null
let chartPurchase: echarts.ECharts | null = null

const drawChart = () => {
  if (data.value) {
    const {
      yAxis,
      legend,
      xAxis,
      series
    } = data.value

    const pieXData = data.value.bing_xdata
    const pieData = data.value.bing_data

    // 构建Echart的option
    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      // legend: {
      //   orient: 'horizontal',
      //   left: 'center',
      //   data: legend
      // },
      xAxis: [
        {
          type: 'category',
          axisLine: { show: false },
          axisTick: {
            alignWithLabel: true,
            interval: 0,
            length: 1
          },
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          data: xAxis
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: yAxis.maxnum,
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: { show: false }
        }
      ],
      series: [{
        name: legend[0],
        type: 'line',
        itemStyle: {
          color: '#3eb3f7'
        },
        data: series
      }]
    }
    const pieChartOption: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: pieXData
      },
      series: [{
        name: '用户消费统计',
        type: 'pie',
        data: pieData
      }]
    }

    chartPurchase?.setOption(pieChartOption)
    chartUser?.setOption(option)
  }
}

watch(innerWidth, () => {
  // 窗口大小改变，重绘数据视图
  if (data.value) {
    chartPurchase?.resize()
    chartUser?.resize()
    drawChart()
  }
})

onMounted(async () => {
  if (chartRefUser.value) {
    echarts.init(chartRefUser.value).dispose()
    chartUser = echarts.init(chartRefUser.value)
  }
  if (chartRefPurchase.value) {
    // chartRefPurchase
    echarts.init(chartRefPurchase.value).dispose()
    chartPurchase = echarts.init(chartRefPurchase.value)
  }
  await loadData()
  if (data.value) { drawChart() }
})
</script>

<style lang="scss" scoped>
.box-card {
  padding: 0px;
  margin-bottom: 10px;
  font-size: 14px;
  .order-histogram-icon {
    color: rgb(24, 144, 255);
    background-color: rgb(230, 247, 255);
    margin: -10px auto;
    margin-right: 5px;
  }
}
.echart-area {
  min-width: 320px;
  height: 300px;
}
:deep(.el-radio-button) {
  & .el-radio-button__inner {
    border: none !important;
    box-shadow: none;
  }
  &.is-active .el-radio-button__inner {
    color: rgb(24, 144, 255);
    border: none !important;
    background-color: transparent !important;
  }

}
:deep(.el-card__body) {
  padding: 12px;
  & .title {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.fl-right {
  float: right;
}
.porid-tab {
  &.active {
    color: rgb(24, 144, 255);
  }
}
</style>
